import { Component } from 'react';
import './Speed.less';
import Button from 'uxcore-button';
import Select from 'uxcore-select2';
const Option = Select.Option;

const data1 = [['车辆1', 0, 0], ['车辆2', 0, 0], ['车辆3', 0, 0], ['车辆4', 0, 0], ['车辆5', 0, 0], ['车辆6', 0, 0], ['车辆7', 0, 0]];
const data2 = [['线路1', 0, 0], ['线路2', 0, 0], ['线路3', 0, 0], ['线路4', 0, 0], ['线路5', 0, 0], ['线路6', 0, 0], ['线路7', 0, 0]];

export default class Speed extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: data1,
      display1: 'inline-block',
      display2: 'none',
      active: 'speed'
    }
  }

  trCreate() {
    let { data } = this.state;
    let tbodyHtml = data.map((value, index) => {
      return <tr>
        <td>{value[0]}</td>
        <td>{value[1]}</td>
        <td><span className="table-bar-item" style={{ width: value[1] + '%' }}></span></td>
        <td>{value[2]}</td>
        <td><span className="table-bar-item table-bar-g" style={{ width: value[2] + '%' }}></span></td>
      </tr>
    });
    return tbodyHtml;
  }

  buttonClick(value) {
    switch (value) {
      case 'time':
        this.setState({
          data: data2,
          display1: 'none',
          display2: 'inline-block',
          active: value
        });
        break;
      default:
        this.setState({
          data: data1,
          display1: 'inline-block',
          display2: 'none',
          active: value
        });
        break;
    }
  }


  render() {
    let { data, display1, display2, active } = this.state;
    return (
      <div className="mod-speed">
        <div>
          <Button type='blue' className={active == 'speed' ? 'button-active' : ''} onClick={this.buttonClick.bind(this, 'speed')}>平均车速</Button>
          <Button type='blue' className={active == 'time' ? 'button-active' : ''} onClick={this.buttonClick.bind(this, 'time')}>同期对比</Button>
        </div>
        <div>
          <Select defaultValue="拱墅区" style={{ width: 90 }} dropdownClassName="kuma-select2-selected-has-icon">
            <Option value="拱墅区">拱墅区</Option>
            <Option value="西湖区">西湖区</Option>
            <Option value="上城区">上城区</Option>
          </Select>
          <Select defaultValue="余杭塘路" style={{ width: 90, display: display1 }} dropdownClassName="kuma-select2-selected-has-icon">
            <Option value="余杭塘路">余杭塘路</Option>
            <Option value="文一西路">文一西路</Option>
            <Option value="文二西路">文二西路</Option>
          </Select>
          <Select defaultValue="高峰" style={{ width: 90, display: display2 }} dropdownClassName="kuma-select2-selected-has-icon">
            <Option value="高峰">高峰</Option>
            <Option value="平峰">平峰</Option>
          </Select>
        </div>
        <table className="table-bar">
          <thead>
            <tr>
              <th></th>
              <th>平峰</th>
              <th>平均车速 km/h</th>
              <th>高峰</th>
              <th>平均车速 km/h</th>
            </tr>
          </thead>
          <tbody>
            {this.trCreate()}
          </tbody>
        </table>
      </div>
    );
  }
}
